<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            border:0;
        }
        a{
            text-decoration: none;
        }
        body{
            font-family: 微软雅黑, Arial, Helvetica;
            font-size: 14px;

        }
        ul,li{
            list-style: none;
        }
        #menu,#content,#content-box{
            height:1200px;
        }
        /*重用率较高的公共部分*/
        .width2{
            width:2%;
        }
        .width4{
            width:4%;
        }
        .width6{
            width:6%;
        }
        .width9{
            width:9%;
        }
        .width12{
            width:12%;
        }
        .width14{
            width:14%;
        }
        .width27{
            width:27%;
        }
        .width62{
            width:62%;
        }
        .float-l{
            float:left;
        }
        .float-r{
            float: right;
        }
        .font-s12{
            font-size: 12px;
        }
        .color-white{
            color:#FFFFFF;
        }
        .color-black{
            color:#373e44;
        }
        .padding-l40{
            padding-left:40px;
        }
        .red{
            color:#f2362e;
        }
        .grey{
            color:#e4e4e4;
        }
        /*左边导航部分*/
        #menu{
            overflow: hidden;
            color:#60708d;
            float:left;
            width:255px;
            background:#1B2A3B;

        }
        #menu .admin{
            overflow:hidden;
            padding:25px 0 5px 30px;
            border-bottom:1px solid #00A5FD;
        }
        #menu .admin .admin-text{
            height:80px;
            padding:20px 0 0 10px;
        }
        #menu .admin .admin-img{
            border-radius:60px;
        }
        #menu .menu-li{
            padding-top:25px;
        }
        #menu .menu-li li{
            font-size: 16px;
            line-height:46px;
            height:46px;
            width:255px;
        }
        #menu .menu-li li a{
            overflow: hidden;
            display:block;
            cursor: pointer;
            height:22px;
            line-height:22px;
            margin-left:4px;
            padding:12px 0 12px 56px;
        }
        #menu .menu-li .home{
            background:url(backend-img/menu-li/home.png) no-repeat 26px 12px;
        }
        #menu .menu-li .menu{
            background:url(backend-img/menu-li/menu.png) no-repeat 26px 12px;
        }
        #menu .menu-li .article{
            background:url(backend-img/menu-li/article.png) no-repeat 26px 12px;
        }
        #menu .menu-li .member{
            background:url(backend-img/menu-li/member.png) no-repeat 26px 12px;
        }
        #menu .menu-li .member{
            background:url(backend-img/menu-li/member.png) no-repeat 26px 12px;
        }
        #menu .menu-li .files{
            background:url(backend-img/menu-li/files.png) no-repeat 26px 12px;
        }
        #menu .menu-li .comment{
            background:url(backend-img/menu-li/comment.png) no-repeat 26px 12px;
        }
        #menu .menu-li .recycle{
            background:url(backend-img/menu-li/recycle.png) no-repeat 26px 12px;
        }
        .hover{
            background-color:#1d2636!important;
            border-left:4px solid #64b281;
            margin-left: 0!important;
            color:#FFFFFF;
            background-position:26px -44px!important;
        }
        .hovers{
            background-color:#1d2636!important;
            border-left:4px solid #16a4fa;
            margin-left: 0!important;
            color:#FFFFFF;
            background-position:26px -44px!important;
        }
        /*右边内容区域*/
        #content{
            overflow: hidden;
            color:#48525a;
            float:right;
            width:100%;
            margin-left:-255px;
        }
        #content-box{
            margin-left:255px;
            background:#ecf0f1;
        }
        .content-head{
            overflow: hidden;
            background:#FFFFFF;
            height:130px;
        }
        .content-head .keyboard{
            height:80px;
            border-bottom:1px solid #E4E4E4;
        }
        .content-head .search{
            margin-top: 23px;
            float:left;
            height:35px;
            width:260px;
            border-radius:5px;
            background:url(backend-img/content-head/search-ico.png) no-repeat #F0F0F0 12px 9px;
        }
        .content-head .keyboard-botton {
            height:100%;
            float: right;
        }
        .content-head .keyboard-botton a{
            display: inline-block;
            height:60px;
            padding-top:20px;
        }
        .content-head .on-off{
            padding:0 30px;
            margin-left:10px;
            border-left:1px solid #e3e3e3;
        }
        .box{
            overflow: hidden;
            border:1px solid #dddddd;
            background:#FFFFFF;
            padding:20px 24px;
            margin-bottom:30px;
        }
        .box .title{
            width:100%;
            padding-bottom: 20px;
        }
        .box .title span{
            color:#a5b0b4;
        }
        .navigation{
            height:49px;
            line-height: 49px;
        }
        .navigation a{
            color:#373e44;
        }
        .navigation span{
            float: right;
            color:#888888;
            padding-right:20px;
        }
        .navigation .rating{
            padding-left:23px;
            background:url(backend-img/content-head/rating.png) no-repeat 8px 6px;
        }
        .content{
            overflow:hidden;
            padding:25px 15px;
        }
        .help-block{
            color:#E32313;
            font-size:12px;
            height:15px;
            line-height:15px;
            width:200px;
            margin-bottom:5px;
        }
        /*下面的样式是根据页面定制*/
    </style>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="content">
    <div id="content-box">
        <div class="content-head">
            <div class="keyboard padding-l40">
                <input type="text" class="search padding-l40 color-black" placeholder="站内搜索"/>
                <div class="keyboard-botton">
                    <a href="javascript:void(0);"><img src="backend-img/content-head/settings.png"/></a>
                    <a href="javascript:void(0);"><img src="backend-img/content-head/language.png"/></a>
                    <a href="javascript:void(0);" class="information"><img src="backend-img/content-head/information.png"/></a>
                    <a href="javascript:void(0);" class="on-off"><img src="backend-img/content-head/on-off.png"/></a>
                </div>
            </div>
            <div class="navigation padding-l40">
                <a href="javascript:void(0);">导航管理</a><a href="javascript:void(0);" class="rating">列表</a><span>在这里可以自定义导航，以及对导航进行修改和删除,删除后不可恢复。</span>
            </div>
        </div>
        <div class="content">
            <div class="count box">
                <div class="title">
                    系统信息
                    <span>|</span>
                    <span>服务器的配置信息</span>
                </div>
                <ul>
                    <li><img src="backend-img/content/count-php.png"/><span>5.5.4</span></li>
                    <li><img src="backend-img/content/count-server.png"/><span>NGINX 1.8.9</span></li>
                    <li><img src="backend-img/content/count-mysql.png"/><span>MYsql  5.6</span></li>
                    <li><img src="backend-img/content/count-ip.png"/><span>121.42.93.168</span></li>
                    <li><img src="backend-img/content/count-time.png"/><span>上次访问2015/08/11</span></li>
                </ul>
            </div>
            <div class="box">
                <div class="title">
                    统计
                    <span>|</span>
                    <span>访问量使用IP计量，点击量以文章点击次数计量</span>
                </div>
                <div id="main" style="min-height:450px;"></div>
            </div>
        </div>
    </div>
</div>
<div id="menu">
    <div class="admin">
        <img class="admin-img float-l" src="backend-img/menu-admin/admin-img.png"/>
        <p class="admin-text float-l">
            <span class="color-white">用户 / admin</span><br/>
            <span class="font-s12">超级管理员</span>
        </p>
    </div>
    <div class="menu-li">
        <ul>
            <li><a class="home hovers">首页</a></li>
            <li><a class="menu">导航管理</a></li>
            <li><a class="article">文章管理</a></li>
            <li><a class="member">会员管理</a></li>
            <li><a class="files">文件管理</a></li>
            <li><a class="comment">评论管理</a></li>
            <li><a class="recycle">回收站</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    //左侧导航菜单切换
    $(function(){
        $('.menu-li a').hover(function(){
                    $(this).addClass('hover');
                },function(){
                    $(this).removeClass('hover');
                }
        )
        $('.menu-li a').on("click",function(){
            $('.menu-li a').removeClass('hover hovers');
            $(this).addClass('hovers');
        })
    });
    //统计图表
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title : {
            text : '',
            subtext : ''
        },
        tooltip : {
            trigger: 'item',
            formatter : function (params) {
                var date = new Date(params.value[0]);
                data = date.getFullYear() + '-'
                        + (date.getMonth() + 1) + '-'
                        + date.getDate() + ' '
                        + date.getHours() + ':'
                        + date.getMinutes();
                return data + '<br/>'
                        + params.value[1] + ', '
                        + params.value[2];
            }
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        dataZoom: {
            show: true,
            start : 70
        },
        legend : {
            data : ['series1']
        },
        grid: {
            y2: 80
        },
        xAxis : [
            {
                type : 'time',
                splitNumber:10
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name: 'series1',
                type: 'line',
                showAllSymbol: true,
                symbolSize: function (value){
                    return Math.round(value[2]/10) + 2;
                },
                data: (function () {
                    var d = [];
                    var len = 0;
                    var now = new Date();
                    var value;
                    while (len++ < 200) {
                        d.push([
                            new Date(2014, 9, 1, 0, len * 10000),
                            (Math.random()*30).toFixed(2) - 0,
                            (Math.random()*100).toFixed(2) - 0
                        ]);
                    }
                    return d;
                })()
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //让图表实时跟随浏览器放大缩小
    setTimeout(function (){
        window.onresize = function () {
            myChart.resize();

        }
    },200);
</script>
</body>
</html>